{% extends "_layouts/examples.html" %}
{% block title %}Grid / Responsive{% endblock %}

{% block standalone_css %}patterns_grid-8{% endblock %}

{% block content %}
<div class="grid-demo">
  <div class="grid-row">
    <div class="grid-col-1 grid-col-medium-1 grid-col-small-1">
      .grid-col-1.grid-col-medium-1.grid-col-small-1
    </div>
    <div class="grid-col-3 grid-col-medium-2 grid-col-small-1">
      .grid-col-3.grid-col-medium-2.grid-col-small-1
    </div>
    <div class="grid-col-4 grid-col-medium-1 grid-col-small-2">
      .grid-col-4.grid-col-medium-1.grid-col-small-2
    </div>
  </div>
  <div class="grid-row">
    <div class="grid-col-1 grid-col-medium-1 grid-col-small-1">
      .grid-col-1.grid-col-medium-1.grid-col-small-1
    </div>
    <div class="grid-col-3 grid-col-medium-1 grid-col-small-1">
      .grid-col-3.grid-col-medium-1.grid-col-small-1
    </div>
    <div class="grid-col-2 grid-col-medium-1 grid-col-small-1">
      .grid-col-2.grid-col-medium-1.grid-col-small-1
    </div>
    <div class="grid-col-2 grid-col-medium-1 grid-col-small-1">
      .grid-col-2.grid-col-medium-1.grid-col-small-1
    </div>
  </div>
  <div class="grid-row">
    <div class="grid-col-4 grid-col-medium-2 grid-col-small-3">
      .grid-col-4.grid-col-medium-2.grid-col-small-3
    </div>
    <div class="grid-col-4 grid-col-medium-2 grid-col-small-1">
      .grid-col-4.grid-col-medium-2.grid-col-small-1
    </div>
  </div>
</div>
{% endblock %}
